import React, { Component, useEffect, useState } from "react";
import Taro, { useRouter } from "@tarojs/taro";
import { View, Button, Text } from "@tarojs/components";
import dayjs from "dayjs";
import PinchZoom from "pinch-zoom-js";
import { observer, inject } from "mobx-react";
import classNames from "classnames";
import { AtFloatLayout } from "taro-ui";
import downIcon from "../../assets/down-icon.png";
import "./index.scss";
import { NavBar } from "../../../src/components/nav-bar";
import closeBlack from "../../assets/close-black.png";
import checkIcon from "../../assets/check-icon.png";
import folderFile from "../../assets/folder-file.png";
import { documentConfig } from "./documentConfig";
import { filterDocumentType, getOssUrl, getStore } from "../../../src/utils";
import { fetchFileVersions } from "../../../src/api/file-tab";
import {
  FileItem as IFileItem,
  IFile,
  IVersion,
} from "../../../src/interfaces";
import { matchSuffixType } from "../../../src/utils/check-file-type";
import { PreviewComponent } from "./preview-component";

export const VersionLine = ({
  checked,
  onClick,
  ...version
}: IVersion & {
  checked?: boolean;
  onClick?: () => void;
}) => {
  return (
    <div
      className={classNames("version-line", {
        checked: checked,
      })}
      onClick={onClick}
    >
      <div className="version-name">版本{version.version}</div>
      <div className="file">
        <div className="icon">
          <span
            className={`iconfont ${matchSuffixType(
              version.extensionName,
              version.type
            )}`}
          ></span>
          {/* <img src={checkIcon} alt="" /> */}
        </div>
        <div className="file-info">
          <div className="file-name ellipsis">{version.name}</div>
          <div className="file-time">
            {dayjs(version.createdAt).format("YYYY/MM/DD HH:mm")}
          </div>
        </div>
      </div>
      <div className="check">
        <img src={checkIcon} alt="" />
      </div>
    </div>
  );
};

const Index = () => {
  const [fileName, setFileName] = useState("文件");
  const [versions, setVersions] = useState<IVersion[]>([]);
  const [currentVersion, setCurrentVersion] = useState(0);

  const [open, setOpen] = useState(false);
  const router = useRouter();

  const { spaceId, channelId, fileId, name, urlLink, accessKey } =
    router.params || {};

  useEffect(() => {
    const file = versions[currentVersion];
    if (!file) return;
    setFileName(file.name);
  }, [currentVersion, versions]);
  useEffect(() => {
    const init = async () => {
      Taro.showLoading();
      const { code, data, message } = await fetchFileVersions(
        spaceId,
        channelId,
        fileId,
        accessKey
      );
      Taro.hideLoading();
      if (code !== 0) {
        alert(message);
        return;
      } else {
        setVersions(data);
      }
    };
    init();
    window.scrollTo(0, 0);
  }, []);
  return (
    <View className="file-preview">
      <NavBar
        className="nav-bar"
        center={fileName}
        right={
          <div className="change-version" onClick={() => setOpen(true)}>
            <div>版本{versions[currentVersion]?.version}</div>
            <span className="iconfont icon-down-line1"></span>
          </div>
        }
      ></NavBar>
      <PreviewComponent file={versions[currentVersion]} />

      <AtFloatLayout
        className="m-float-layout adapt-height"
        isOpened={open}
        upperThreshold={100}
        title=""
        onClose={() => setOpen(false)}
      >
        <div className="title">
          <img
            style={{
              visibility: "hidden",
            }}
            src={closeBlack}
          />
          切换版本
          <span
            className="iconfont icon-close"
            onClick={() => setOpen(false)}
          ></span>
        </div>
        <div className="versions">
          <ul>
            {versions.map((v, idx) => {
              return (
                <VersionLine
                  key={v.id}
                  checked={currentVersion === idx}
                  onClick={() => {
                    setCurrentVersion(idx);
                    setOpen(false);
                  }}
                  {...v}
                />
              );
            })}
          </ul>
        </div>
      </AtFloatLayout>
    </View>
  );
};

export default Index;
